<template>
    <div class="wrapper">
        <div class="content">
            <van-cell-group>
                <!--                <van-cell title="营销类别" @click="getfindByAgencySource" :value="yxlb ? yxlb : '请选择营销类别'" is-link />-->
                <van-cell title="SIM卡扣费标准" @click="getgetSimConfig" :value="kfbz ? kfbz : '请选择SIM卡扣费标准'" is-link />
                <van-cell title="扣费天数" @click="onSelect" v-if="kfbz" :value="simDeductDay ? simDeductDay : '请选择扣费天数'" is-link />
            </van-cell-group>
        </div>
        <!-- 营销类别下拉框 -->
        <van-action-sheet @cancel="onCancel" cancel-text="取消" v-model:show="showFirst" :actions="yxlbList" @select="onSelectyxlb" />
        <!-- SIM卡扣费标准下拉框 -->
        <van-action-sheet @cancel="onCancel" cancel-text="取消" v-model:show="showTwo" :actions="kfbzList" @select="onSelectkfbz" />
        <!-- 扣费天数下拉框 -->
        <van-action-sheet @cancel="onCancel" cancel-text="取消" v-model:show="showBottom" :actions="dayList" @select="onSelectDay" />
        <div class="confirm" @click="subSetPosSimDeduct">修 改</div>
    </div>
</template>

<script setup>
import { findSetPosSimAct, getSimConfigById, setPosSimDeduct, findByAgencySource, getSimConfig } from '../../api/posManagement'
import store from '../../store'
import { showSuccessToast, showToast } from 'vant'

const showFirst = ref(false)
const showBottom = ref(false)
const showTwo = ref(false)

const yxlb = ref(null)
const yxlbid = ref(null)
const kfbz = ref(null)
const kfbzId = ref(null)
const deductAmount = ref(null)
const simDeductDay = ref(null)

const yxlbList = ref([])
const dayList = ref([])
const kfbzList = ref([])
const router = useRouter()
const route = useRoute()

// 获取营销类别数据
const getfindByAgencySource = () => {
    findByAgencySource().then(res => {
        yxlbList.value = res.object.map(item => {
            item.name = item.name
            return item
        })
        showFirst.value = true
    })
}
console.log(route)
// 获取sim卡扣费标准数据
const getgetSimConfig = () => {
    getSimConfig({
        agencySource:route.query.agencySource
    }).then(res => {
        kfbzList.value = res.object.map(item => {
            item.name = item.deductAmount
            return item
        })
        showTwo.value = true
    })
}

// 获取扣费天数数据
const onSelect = () => {
    getSimConfigById({
        classesId: yxlbid.value,
        agencySource:route.query.agencySource
    }).then(res => {
        dayList.value = res.object.map(item => {
            return {
                name: item
            }
        })
        showBottom.value = true
    })
}

// 选择营销类别
const onSelectyxlb = item => {
    yxlb.value = item.name
    yxlbid.value = item.id
    kfbz.value = null
    kfbzId.value = null
    deductAmount.value = null
    simDeductDay.value = null
    showFirst.value = false
}

// 选择sim卡扣费标准
const onSelectkfbz = item => {
    kfbz.value = item.name
    kfbzId.value = item.id
    deductAmount.value = item.deductAmount
    showTwo.value = false
}

// 选中扣费天数
const onSelectDay = item => {
    simDeductDay.value = item.name
    showBottom.value = false
}

// 修改操作
const subSetPosSimDeduct = () => {
    // if (!yxlb.value) {
    //     showToast('请选择营销类别')
    //     return
    // }
    if (!kfbz.value) {
        showToast('请选择SIM卡扣费标准')
        return
    }
    if (!simDeductDay.value) {
        showToast('请选择扣费天数')
        return
    }
    setPosSimDeduct({
        tusns: store.state.data.POSTUSN,
        configId: kfbzId.value,
        agencySource:route.query.agencySource,
        deductTime: Number(simDeductDay.value)
    }).then(res => {
        showSuccessToast('修改成功')
        setTimeout(() => {
            router.go(-1)
        }, 2000)
    })
}

// 取消按钮
const onCancel = () => {
    showBottom.value = false
}
</script>
<style scoped lang="scss">
.wrapper {
    padding: 10px;
}

.content {
    border-radius: 10px;
    overflow: hidden;
}

.confirm {
    width: 160px;
    height: 40px;
    background: #66d6ff;
    border-radius: 7px;
    font-size: 14px;
    //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    margin: 100px auto 0;
    text-align: center;
    line-height: 40px;
}
</style>
